<template>
  <div class="macroquerypanel">
    <div class="banner">
      <p>设置查询条件</p>
      <p class="close-box">
        <i class="close icon-font el-icon-close" @click="closeInfoWin"></i>
      </p>
    </div>

    <div class="content-box">
      <div class="nav-box">
        <ul>
          <li
            v-for="(item,index) in slavelist"
            :key="index"
            :class="acrivetable==index?'active':''"
            @click="navhanderiden(item,index)"
          ><i class="el-icon-star-on" v-if="index==0">&nbsp;&nbsp;</i>{{item.name}}</li>
        </ul>
      </div>
      <div class="content">
        <div class="grid-content bg-purple-left">
            <p class="title">指标选择</p>
            <div class="iden-box">
              <ul v-for="(item,index) in microIdenData" :key="index">
                <li
                  v-show="item.idenType!=3&&item.idenType!=4&&item.idenAliasCode!='QH'"
                  :class="activeindex==index?'active':''"
                  @click="handeriden(item,index)"
                >
                <div class="textIcon idenIcon" v-if="item.idenType==1"></div>
                <div class="numIcon idenIcon" v-if="item.idenType==2"></div>
                <!-- <div class="groupIcon idenIcon" v-if="item.idenType==4"></div> -->
                <p  :title="item.idenName">{{item.idenName}}</p>
                </li>
              </ul>
            </div>
        </div>
        <div class="grid-content bg-purple-right">
          <div class="content-box">
              <!-- 文本条件内容 -->
              <div class="text-content" v-show="checkIdenType == 1">
                <p class="idenName">{{checkedIden.idenName}}</p>
                <el-select
                  v-model="text_content.value"
                  size="small"
                  popper-class="text_content-popper"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in text_content.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item"
                  ></el-option>
                </el-select>
                <el-input
                  v-model="text_content.input"
                  placeholder="请输入文本"
                  size="small"
                  clearable
                  type="text"
                ></el-input>
              </div>
              <!-- 数字条件内容 -->
              <div class="num-content" v-show="checkIdenType == 2">
                <p class="idenName">{{checkedIden.idenName}}</p>
                <el-select
                  v-model="num_content.value"
                  size="small"
                  popper-class="num_content-popper"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in num_content.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item"
                  ></el-option>
                </el-select>
                <el-input
                  v-model="num_content.input"
                  placeholder="请输入数字"
                  size="small"
                  clearable
                  type="number"
                ></el-input>
              </div>
              <!-- 枚举指标内容 -->
              <!-- <div class="iden-content" v-show="checkIdenType == 4">
                <div class="title-box">
                  <p class="idenName">{{checkedIden.idenName}}</p>
                  <el-select
                    v-model="iden_content.value"
                    size="small"
                    popper-class="iden_content-popper"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in iden_content.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item"
                    ></el-option>
                  </el-select>
                </div>
            

                <el-tree 
                ref="iden_content_tree"
                node-key="id"
                :data="identValTree.data" 
                :props="iden_content.identreeprops" 
                show-checkbox
                :check-strictly="true"
                @node-expand="identreeloadNode">
                </el-tree>

              </div> -->
          </div>
            <div class="btn-box">
              <el-button type="primary" size="small" class="addterm" @click="addtermfunc">添加条件</el-button>
            </div>

            <div class="term-box">
              <p class="title">已添加条件面板</p>
              <div class="hasaddterm-box">
                <p v-for="(item,index) in hasaddterm.mainconditions" :key="index">
                  {{index+1}}、{{item.valueName}}
                  <i
                    class="el-icon-circle-close"
                    @click="deleteterm(item,index)"
                  ></i>
                </p>
              </div>
              <div class="btn-box">
                <el-button type="primary" size="small" class="clearBtn" @click="clearterm()">清空</el-button>
                <el-button type="primary" size="small" class="saveterm" @click="openDialogSaveTerm">收藏条件</el-button>
                <el-button type="primary" size="small" class="searchterm" @click="searchterm()">查询</el-button>
              </div>
            </div>
        </div>
      </div>

      <el-dialog
        title="收藏条件"
        :visible.sync="dialogSaveTermVisible"
        :modal="false"
        :center="true"
        :close-on-click-modal="true"
        custom-class="dialogSaveTerm"
        width="500px"
      >
        <el-form :model="savetermform" ref="savetermValidateForm" label-width="55px" size="small">
          <el-form-item label="标题" 
          prop="title"
          :rules="[
            { required: true, message: '标题不能为空'}
          ]">
            <el-input type="title" v-model="savetermform.title" autocomplete="off" ></el-input>
          </el-form-item>
          <el-form-item label="描述"  prop="memo">
            <el-input v-model="savetermform.memo" type="memo" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveterm('savetermValidateForm')" size="small">确 定</el-button>
          <el-button @click="closeTermDialog('savetermValidateForm') " size="small">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import axios from "axios";
import * as microAPI from "@/pages/micro/api/micro.js";
import microConfig from "static/config/micro.js";

export default {
  name: "macroquerypanel",
  props: ["maintableinfo", "reportvalue","collapsemainconditions"],
  data() {
    return {
      checkedtable: {}, //选中的表
      microIdenData: [], //基层指标数据列表
      slavelist: [], //主表下的子表
      //文本类型条件
      text_content: {
        options:microConfig.text_content,
        value: "", //下拉选择值
        input: "" //输入框值
      },
      //数字条件
      num_content: {
        value: "",
        options: microConfig.num_content,
        input: ""
      },
      //枚举类型条件
      iden_content: {
        value: "",
        options: microConfig.iden_content,
        identreeprops: {
          label: "name",
          children: "children"
        }
      },
      checkIdenType: "", //选中指标类型
      checkedIden: {}, //存放选中指标
      //添加的条件
      hasaddterm: {
        mainconditions: [], //原始的全部条件
        conditions: [], //主表条件(传给后台)
        msConditions: [] //从表条件(传给后台)
      },
      activeindex: 0, //高亮指标
      acrivetable: 1, //高亮的表
      dialogSaveTermVisible: false, //收藏条件弹窗
      savetermform: {
        //收藏条件字段
        title: "",
        memo: ""
      },
      savetermformLabelWidth: "120px", //收藏条件表单字体宽度
      
      identValTree:{//分组值树
        data:[],
      },
      savemainconditions:[],//保持分类查询条件
    };
  },
  created() {},
  computed: {
    ...mapState({
      showmacroqueryall: state => state.micro.showmacroqueryall
    })
  },
  watch: {
    reportvalue(newval) {
      this.reportvalue = newval;
    },
    maintableinfo(newval){
      this.maintableinfo = newval;
      this.slavelist = [];
      this.slavelist.push(this.maintableinfo);
      this.getMicroslavelist();
      this.navhanderiden(this.maintableinfo,0);
      this.clearterm();
    },
    collapsemainconditions(newval,oldval){
      this.savemainconditions = newval;
      this.initcollapsemainconditions();
    }
  },
  mounted() {
    if (sessionStorage.getItem("hasaddterm")) {
      try {
        this.hasaddterm = JSON.parse(sessionStorage.getItem("hasaddterm"));
      } catch (e) {
        sessionStorage.removeItem("hasaddterm");
      }
    }
    this.clearterm();
    this.checkedtable = this.maintableinfo; //将默认主表设为选中表

    this.getMicroIden(this.maintableinfo.id);
  },
  methods: {
    ...mapMutations(["changeshowmacroqueryall"]),
    initcollapsemainconditions(){
      //转换防止监听错误
      let arr = this.savemainconditions;
      let arr_str = JSON.stringify(arr);
      let arr_parse = JSON.parse(arr_str);
      this.hasaddterm.mainconditions = arr_parse;
    },
    //查询当前对象(主表)下的子表
    getMicroslavelist() {
      let that = this;
      let req = {
        masterId : that.maintableinfo.id
      };
      microAPI.selectedSlaveTable(req).then(res=>{
        if(res.message == "success"&&res.data.length>0){
          let arr = res.data;
          that.slavelist.push(...arr);
        }
      })
        .catch (error=>{
          console.log(error)
        })
    },
    //查询基层指标
    getMicroIden(id) {
      let that=this;
      let req = {
        miid : id,
        iden_type:''
      };
      microAPI.getSelectedTableIden(req).then(res=>{
        if(res.message == "success"&&res.data.length>0){
          that.microIdenData = res.data;
          let index = 0;
          for(let i in that.microIdenData){
            if(that.microIdenData[i].idenType!=4&&that.microIdenData[i].idenAliasCode!='QH'){
              index = i; 
              that.handeriden(that.microIdenData[index],index);
              return ;
            }
          }
        }
      })
        .catch (error=>{
          console.log(error)
        })
    },
    //表切换
    navhanderiden(item, index) {
      this.acrivetable = index; //默认有一个主表，所有索引加1
      this.checkedtable = item;
      this.getMicroIden(item.id);
      this.num_content.input = "";
      this.text_content.input = "";
      // this.$refs.iden_content_tree.setCheckedNodes([]);
    },
    //根据指标类型初始化条件
    handeriden(item, index) {
      let that = this;
      that.checkedIden = item;
      that.activeindex = index;
      let iden_type = item.idenType;
      switch (iden_type) {
        case 1: //文本指标
          that.checkIdenType = 1;
          break;
        case 2: //数字指标
          that.checkIdenType = 2;
          break;
        case 4: //"枚举指标"
          that.checkIdenType = 4;
          that.initEnumTree(item);
          break;
        default:
          that.checkIdenType = 1;
      }
    },
    // 初始化枚举分组树
    initEnumTree(item) {
      let that = this;
      this.checkedIden = item;
      if (this.checkedIden.idenType == 4) {
        let req={
          mid:this.checkedIden.identid,
          vid:this.checkedIden.identVersion,
          parcode:'root'
        }
        that.getIdentVal(req,function(data){
          that.identValTree.data = data;
        })
      }
    },
    //枚举指标树加载
    identreeloadNode(obj,node, resolve) {
      let that = this;
      if (that.checkedIden.idenType == 4) {
        if(!obj.children[0].hasOwnProperty("id")){//防止重复请求子节点
          let req={
            mid:this.checkedIden.identid,
            vid:this.checkedIden.identVersion,
            parcode:'root'
          }
          if (node.level != 0) {
            req.parcode = node.data.code
          }
          that.getIdentVal(req,function(data){
            obj.children = data;
          })
        }
      }
    },
    //获取分组值
    getIdentVal(req,callback){
      microAPI.selectRoot(req).then(res=>{
          let data = res.data
          for(let i in data){
            if(data[i].hasChild!=0){
              data[i].isLeaf = false;
              data[i].children = [{}];
            }
          }
          callback(data);
        })
    },
    //添加条件
    addtermfunc() {
      let that = this;
      if (that.checkIdenType == 1) {
        //文本指标
        if (that.text_content.input == "") {
          this.$message({
            message: "请先输入值",
            type: "warning"
          });
        } else if (that.text_content.value == "") {
          this.$message({
            message: "请先选择条件",
            type: "warning"
          });
        } else {
          //如果选中的是主表
          if (that.maintableinfo.id == this.checkedtable.id) {
            let valueName =
              that.checkedIden.idenName +
              "  " +
              that.text_content.value.label +
              "  " +
              that.text_content.input;
            this.hasaddterm.mainconditions.push({
              //添加条件至全部的条件组
              ismaintable: true, //是否为主表
              microid: that.maintableinfo.id, //表ID
              field: that.checkedIden.idenCode, //指标代码
              operate: that.text_content.value.value, //条件运算符
              value: that.text_content.input, //条件值
              fieldName: that.checkedIden.idenName, //指标名称
              idenType: that.checkedIden.idenType, //指标类型
              groupId: that.checkedIden.identid, //分组id
              enumName: that.text_content.value.label,
              join: "", //多条件连接符,全部传空
              valueName: valueName //值名称
            });
          } else {
            //如果选中的是子表
            let valueName =
              that.checkedIden.idenName +
              "  " +
              that.text_content.value.label +
              "  " +
              that.text_content.input;
            this.hasaddterm.mainconditions.push({
              //添加条件至全部的条件组
              ismaintable: false, //是否为主表
              microid: that.checkedtable.id, //表ID
              field: that.checkedIden.idenCode, //指标代码
              operate: that.text_content.value.value, //条件运算符
              value: that.text_content.input, //条件值
              fieldName: that.checkedIden.idenName, //指标名称
              idenType: that.checkedIden.idenType, //指标类型
              groupId: that.checkedIden.identid, //分组id
              enumName: that.text_content.value.label,
              join: "", //多条件连接符,全部传空
              valueName: valueName,//值名称
              cmIdenCodes:that.checkedtable.cmIdenCodes,
              pmIdenCodes:that.checkedtable.pmIdenCodes,
              tableName:that.checkedtable.tableName
            });
          }
        }
      } else if (that.checkIdenType == 2) {
        //数字指标
        if (that.num_content.input == "") {
          this.$message({
            message: "请先输入值",
            type: "warning"
          });
        } else if (that.num_content.value == "") {
          this.$message({
            message: "请先选择条件",
            type: "warning"
          });
        } else {
          //如果选中的是主表
          if (that.maintableinfo.id == this.checkedtable.id) {
            let valueName =
              that.checkedIden.idenName +
              "  " +
              that.num_content.value.label +
              "  " +
              that.num_content.input;
            this.hasaddterm.mainconditions.push({
              //添加条件至全部的条件组
              ismaintable: true, //是否为主表
              microid: that.maintableinfo.id, //表ID
              field: that.checkedIden.idenCode, //指标代码
              operate: that.num_content.value.value, //条件运算符
              value: that.num_content.input, //条件值
              fieldName: that.checkedIden.idenName, //指标名称
              idenType: that.checkedIden.idenType, //指标类型
              groupId: that.checkedIden.identid, //分组id
              enumName: that.num_content.value.label,
              join: "", //多条件连接符,全部传空
              valueName: valueName //值名称
            });
          } else {
            let valueName =
              that.checkedIden.idenName +
              "  " +
              that.num_content.value.label +
              "  " +
              that.num_content.input;
            this.hasaddterm.mainconditions.push({
              //添加条件至全部的条件组
              ismaintable: false, //是否为主表
              microid: that.checkedtable.id, //表ID
              field: that.checkedIden.idenCode, //指标代码
              operate: that.num_content.value.value, //条件运算符
              value: that.num_content.input, //条件值
              fieldName: that.checkedIden.idenName, //指标名称
              idenType: that.checkedIden.idenType, //指标类型
              groupId: that.checkedIden.identid, //分组id
              enumName: that.num_content.value.label,
              join: "", //多条件连接符,全部传空
              valueName: valueName, //值名称
              cmIdenCodes:that.checkedtable.cmIdenCodes,
              pmIdenCodes:that.checkedtable.pmIdenCodes,
              tableName:that.checkedtable.tableName
            });
          }
        }
      } else if (that.checkIdenType == 4) {
        //枚举指标
        // let checkedNodes = that.$refs.iden_content_tree.getCheckedNodes();
        // if (that.iden_content.value == "") {
        //   this.$message({
        //     message: "请先选择条件",
        //     type: "warning"
        //   });
        //   return;
        // }
        // if (checkedNodes.length == 0) {
        //   this.$message({
        //     message: "请先选择",
        //     type: "warning"
        //   });
        //   return;
        // }

        // //如果选中的是主表
        // if (that.maintableinfo.id == this.checkedtable.id) {
        //   let checkedtext =
        //     that.checkedIden.idenName +
        //     "  " +
        //     that.iden_content.value.label +
        //     "   "; //文本
        //   let code = "";
        //   for (let i = 0; i < checkedNodes.length; i++) {
        //     if (checkedNodes[i].hasOwnProperty("code")) {
        //       checkedtext += checkedNodes[i].name + ",";
        //       code += checkedNodes[i].code + ",";
        //     }
        //   }

        //   this.hasaddterm.mainconditions.push({
        //     //添加条件至全部的条件组
        //     ismaintable: true, //是否为主表
        //     microid: that.checkedtable.id, //表ID
        //     field: that.checkedIden.idenCode, //指标代码
        //     operate: that.iden_content.value.value, //条件运算符
        //     value: code, //条件值
        //     fieldName: that.checkedIden.idenName, //指标名称
        //     idenType: that.checkedIden.idenType, //指标类型
        //     groupId: that.checkedIden.identid, //分组id
        //     enumName: that.iden_content.value.label,
        //     join: "", //多条件连接符,全部传空
        //     valueName: checkedtext, //值名称
        //     idenAliasCode:that.checkedIden.idenAliasCode//指标别名
        //   });

        // } else {
        //   //如果选中的是子表
        //   let checkedtext =
        //     that.checkedIden.iden_name +
        //     "  " +
        //     that.iden_content.value.label +
        //     "  "; //文本
        //   let code = "";
        //   for (let i = 0; i < checkedNodes.length; i++) {
        //     if (checkedNodes[i].hasOwnProperty("code")) {
        //       checkedtext += checkedNodes[i].name + ",";
        //       code += checkedNodes[i].code + ",";
        //     }
        //   }

        //   this.hasaddterm.mainconditions.push({
        //     //添加条件至全部的条件组
        //     ismaintable: false, //是否为主表
        //     microid: that.checkedtable.id, //表ID
        //     field: that.checkedIden.idenCode, //指标代码
        //     operate: that.iden_content.value.value, //条件运算符
        //     value: code, //条件值
        //     fieldName: that.checkedIden.idenName, //指标名称
        //     idenType: that.checkedIden.idenType, //指标类型
        //     groupId: that.checkedIden.identid, //分组id
        //     enumName: that.iden_content.value.label,
        //     join: "", //多条件连接符,全部传空
        //     valueName: checkedtext, //值名称
        //     cmIdenCodes:that.checkedtable.cmIdenCodes,
        //     pmIdenCodes:that.checkedtable.pmIdenCodes,
        //     tableName:that.checkedtable.tableName
        //   });
        // }
      }

    },
    //删除单个条件
    deleteterm(item, index) {
      this.hasaddterm.mainconditions.splice(index, 1);
      sessionStorage.setItem("hasaddterm", JSON.stringify(this.hasaddterm));
    },
    //清空全部条件
    clearterm() {
      this.hasaddterm.mainconditions = []; //清空全部条件
      this.num_content.input = "";
      this.text_content.input = "";
      // this.$refs.iden_content_tree.setCheckedNodes([]);
    },
    //初始化查询条件
    initConditions(callback) {
      this.hasaddterm.conditions = [];
      this.hasaddterm.msConditions = [];
      //组装数据
      let mainconditions = this.hasaddterm.mainconditions;

      let microidarr = []; //存放所有子表ID

      for (let i = 0; i < mainconditions.length; i++) {
        let operate = mainconditions[i].operate;
        let lastindex = mainconditions[i].value;
        //将字符串中最后一个元素","逗号去掉，
        let str =
          lastindex.substring(lastindex.length - 1) == ","
            ? lastindex.substring(0, lastindex.length - 1)
            : lastindex;
        if (mainconditions[i].ismaintable) {
          //主表条件
          this.hasaddterm.conditions.push({
            field: mainconditions[i].field,
            // enumName: mainconditions[i].enumName,
            fieldName: mainconditions[i].fieldName,
            join: mainconditions[i].join,
            operate: operate,
            value: str,
            // idenType: mainconditions[i].idenType,
            groupId: mainconditions[i].groupId, //分组id
            idenAliasCode:mainconditions[i].idenAliasCode//指标别名
          });
        } else {
          //子表条件
          microidarr.push(mainconditions[i].microid);
        }
      }
      const msConditions_set = new Set(microidarr);
      let allmicroid = [...msConditions_set];

      for (let k = 0; k < allmicroid.length; k++) {
        this.hasaddterm.msConditions.push({
          microid: allmicroid[k],
          conditions: []
        });
      }

      for (let i = 0; i < mainconditions.length; i++) {
        if (!mainconditions[i].ismaintable) {
          let msConditions = this.hasaddterm.msConditions;
          for (let j = 0; j < msConditions.length; j++) {
            if (mainconditions[i].microid == msConditions[j].microid) {
              msConditions[j].conditions.push({
                field: mainconditions[i].field,
                // enumName: mainconditions[i].enumName,
                fieldName: mainconditions[i].fieldName,
                join: mainconditions[i].join,
                operate: mainconditions[i].operate,
                value: mainconditions[i].value,
                // idenType: mainconditions[i].idenType,
                groupId: mainconditions[i].groupId //分组id
              });
              msConditions[j].fkIdens=mainconditions[i].cmIdenCodes;
              msConditions[j].pkIdens=mainconditions[i].pmIdenCodes;
              msConditions[j].tableName=mainconditions[i].tableName;
            }
          }
        }
      }
      callback();
    },
    //查询功能
    searchterm() {
      let that = this;
      if (that.reportvalue) {
        that.initConditions(function() {
          
          sessionStorage.setItem("hasaddterm", JSON.stringify(that.hasaddterm)); //存储查询条件到本地客户端
          that.$emit("search_macro", that.hasaddterm);
          that.clearterm();
          // that.$refs.iden_content_tree.setCheckedNodes([]);
          that.hasaddterm.mainconditions = that.savemainconditions;
        });
      } else {
        that.$message({
          message: "请先选择报告期",
          type: "error"
        });
      }
    },
    //收藏条件
    saveterm(formName) {
      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
            if(that.hasaddterm.mainconditions.length>0){
              that.initConditions(function() {
              let args = {
                title: that.savetermform.title,
                memo: that.savetermform.memo,
                conditions: JSON.stringify(that.hasaddterm.conditions),
                query_api: "api_json", //查询接口
                type: 1, //1=收藏条件
                result_img: "img", //成果图片
                mitmid:that.maintableinfo.id
              };
              microAPI.addAchievement(args).then(res=>{
                if(res.message == "success"){
                  that.dialogSaveTermVisible = false;
                  that.$message({
                    message: "收藏成功",
                    type: "success"
                  });
                  that.$emit("update_SaveTerm");
                  that.$refs[formName].resetFields();
                }else{
                  that.$message({
                    message: res.message,
                    type: "err"
                  });
                }
              })
                .catch (error=>{
                  console.log(error)
                })

            });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //关闭收藏条件弹框
    closeTermDialog(formName){
      this.$refs[formName].resetFields();
      this.dialogSaveTermVisible = false;
    },
    closeInfoWin() {
      this.$store.commit("changeshowmacroqueryall", false);
    },
    //打开收藏条件弹窗
    openDialogSaveTerm() {
      if(this.hasaddterm.mainconditions.length>0){
        this.dialogSaveTermVisible = true;
      }else{
        this.$message({
          message: "请先添加条件",
          type: "err"
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../css/rule.scss";
.macroquerypanel {
  width: 500px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 303px;
  background: $panelContentBg;
  box-sizing: border-box;
  z-index: 99999999;
  transform: none;
  box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(50,161,180,0.9);
  .banner {
    padding: 0 15px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    p {
      font-size: $fontSizeNav;
      line-height: 2.5;
      float: left;
      color: $fontColor;
    }
    .el-page-header {
      float: left;
      font-size: $fontSizeNav;
      float: left;
      color: $fontColor;
      margin-right: 20px;
    }
  }
  .close-box {
    text-align: right;
    font-size: 1.6rem;
    float: right !important;
    margin-top: 0;
    margin-right: 15px;
    .el-icon-close {
      // background: #dddddd7d;
      padding: 5px;
      border-radius: 5px;
      cursor: pointer;
    }
  }
  .nav-box {
    height: 90px;
    overflow: auto;
    width: 100%;
    padding: 10px;
    display: inline-block;
    background: rgba(4,27,67,0.5);
    box-sizing: border-box;
    ul {
      li {
        float: left;
        font-size: 1.6rem;
        line-height: 1.5;
        background:rgba(13,71,100,1);
        padding: 5px 10px;
        cursor: pointer;
        margin-right: 5px;
        margin-bottom: 5px;
        list-style: none;
      }
      li.active {
        background: $fontColorActive;
        color: $fontColorW;
      }
    }
  }
  .content-box {
    box-sizing: border-box;
    height: calc(100% - 43px);
    overflow: hidden;
    .title {
      // margin: 10px 0 5px 0;
      font-size: 1.4rem;
      line-height: 1.5;
      background: $backGroundColor;
      padding: 7px 10px;
    }
    .content{
      width: 100%;
      height: calc(100% - 90px);
      .bg-purple-left {
        background: rgba(4,27,67,0.5);
        padding: 15px 10px;
        width: 35%;
        float: left;
        height: 100%;
        box-sizing: border-box;
        .title {
          position: absolute;
          background:none;
          padding: 0;
        }
        .iden-box{
          height: 94%;
          overflow: auto;
          margin-top: 30px;
        }
        ul {
          li {
            font-size: 1.4rem;
            line-height: 1.5;
            margin-bottom: 10px;
            padding: 5px 10px;
            cursor: pointer;
            background: rgba(15,85,114,1);
            p{
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .idenIcon{
              height: 20px;
              width: 20px;
              float: left;
              margin-right: 10px;
            }
            .textIcon{
              background:url("../../images/idenIcon/text.png");
              background-size: 100% auto;
            }
            .numIcon{
              background:url("../../images/idenIcon/num.png");
              background-size: 100% auto;
            }
            .groupIcon{
              background:url("../../images/idenIcon/group.png");
              background-size: 100% auto;
            }
          }
          li.active {
            background: $fontColorActive;
            color: $fontColorW;
            .textIcon{
              background:url("../../images/idenIcon/text_white.png");
              background-size: 100% auto;
            }
            .numIcon{
              background:url("../../images/idenIcon/num_white.png");
              background-size: 100% auto;
            }
            .groupIcon{
              background:url("../../images/idenIcon/group_white.png");
              background-size: 100% auto;
            }
          }
        }
      }
      .bg-purple-right {
        padding: 0;
        width: 65%;
        height: 100%;
        float: left;
        .content-box {
          height:46%;
          border-top: 0px solid #ddd;
          padding: 20px 10px;
          .text-content,
          .num-content,
          .iden-content {
            display: inline-block;
            margin-bottom: 20px;
            .title-box{
              display: inline-block;
              position: absolute;
            }
            .el-select {
              float: left;
              margin-right: 10px;
              margin-bottom: 15px;
              width: 115px;
            }
            .el-input {
              float: left;
              width: 292px;
              input::-webkit-outer-spin-button,
              input::-webkit-inner-spin-button {
                  -webkit-appearance: none;
              }
              input[type="number"]{
                  -moz-appearance: textfield;
              }
            }

          }

          .iden-content {
            margin-bottom: 20px;
            .el-select {
              margin-bottom: 20px;
            }
            .el-tree {
              color: #636668;
              background: none;
              width: 100%;
              float: left;
              margin-top: 40px;
              height: 300px;
              overflow: auto;
              .el-tree-node__content:hover {
                background: #ddd !important;
                color: #636668;
              }
            }
          }
          .idenName{
            float: left;
            font-size: $fontSize;
            line-height: 32px;
            margin: 0 20px 0 0;
          }
          .title{
            background: rgba(24,100,132,1);
            color:$fontColorLimit;
          }
        }
        .btn-box {
          margin: 15px 0;
          text-align: right;
          padding: 0 10px;
          .addterm {
            background:$fontColorActive;
            border-radius: 4px;
            border: none;
            width: auto;
            height: auto;
          }
        }
        .term-box {
          height: 45%;
          .hasaddterm-box {
            overflow: auto;
            height: 72%;
            padding-left: 10px;
            p {
              font-size: 1.4rem;
              line-height: 1.5;
            }
          }
          .btn-box {
            text-align: center;
            margin-bottom: 50px;
            margin: 15px 0;
            padding: 0;
            .el-button {
              border-radius: 3px;
              border: none;
              width: auto;
              height: auto;
            }
            .saveterm {
              background:rgba(13,100,145,1);
            }
            .searchterm {
              background:rgba(29,156,183,1);
            }
            .clearBtn{
              background:rgba(154,41,40,1);
            }
          }
        }
      }
     
    }
   
  }
}
</style>
<style lang="scss">
@import "../css/rule.scss";
.text_content-popper,
.num_content-popper,
.iden_content-popper {
  border: 0px solid #ddd !important;
  background:$panelContentBg;
  color:$fontColorLimit!important;
}
.text_content-popper .el-select-dropdown__item,
.num_content-popper .el-select-dropdown__item,
.iden_content-popper .el-select-dropdown__item {
  color:$fontColorLimit!important;
}
.text_content-popper .el-select-dropdown__item.hover,
.num_content-popper .el-select-dropdown__item.hover,
.iden_content-popper .el-select-dropdown__item:hover {
  background-color:$colorBackgroundActive;
  color: $fontColorW;
}
.text_content-popper .el-select-dropdown__item.selected,
.num_content-popper .el-select-dropdown__item.selected,
.iden_content-popper .el-select-dropdown__item.selected {
  background-color:$colorBackgroundActive;
  color: $fontColorW;
}
.iden-content .el-tree-node__content:hover {
  background-color:$colorBackgroundActive;
}
.iden-content .el-checkbox__input.is-checked .el-checkbox__inner,
.iden-content .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #5fb8f3;
  border-color: #5fb8f3;
}
.text_content-popper .el-select-dropdown__item,
.num_content-popper .el-select-dropdown__item,
.iden_content-popper .el-select-dropdown__item {
  color: #2e2d2d;
}
.macroquerypanel {
  .el-page-header__title {
    font-size: $fontSizeNav;
    line-height: 2.5;
    float: left;
    color: #6b6a6a;
  }
  .el-page-header__content {
    font-size: $fontSizeNav;
    line-height: 2.5;
    float: left;
    color: #6b6a6a;
  }
  .bg-purple-right {
    .el-input__inner{
      border: 1px solid $borderColorW;
      background: none;
      color:$fontColorLimit;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }             
  }
}
.dialogSaveTerm{
  .el-dialog__headerbtn{
    width: auto;
    height: auto;
    top: 0;
  }
  .el-dialog__body{
    form{
      width: 100%;
      input{
        margin: 0;
      }
    }
  }
  .el-dialog__footer{
    padding-top: 0;
    button{
      width: auto;
      height: auto;
      color:#fff;
    }
    .el-button--default{
      background: none;
      border:1px solid rgba(238, 238, 238, 0.2);
    }
    .el-button--primary{
      background: #1d9cb7;
      border: 1px solid #1d9cb7;
    }
  }
}
</style>





